<template>
	<view class="app-classify-goods-list-two">
		<view class="app-classify-goods-list-two__skeleton" v-if="hasLoading">
			<e-skeleton :show="true" :fixed="false">
				<e-skeleton-item variant="waterfall"></e-skeleton-item>
			</e-skeleton>
		</view>

		<e-scroll-view
			ref="scrollViewRef"
			height="100%"
			width="100%"
			lower-threshold="100"
			refresherRefreshingImg=" "
			refresherRefreshingText=" "
			:refresherDefaultText="$t('tabbar.classifyRefresherTxt1')"
			:refresherPullingText="$t('tabbar.classifyRefresherTxt2')"
			refresherTitleStyle="font-size:24rpx"
			:refresherDefaultImg="$staticPath('arrow-up-double.png')"
			:watchTouchmove="watchTouchmove"
			:refresher-enabled="refresherEnabled"
			unit="rpx"
			@refresh="handlePullDownRefresh"
			@scrolltolower="handleQueryPage()"
			@scroll="handleScroll"
			@touchstart="handleTouchstart"
			@touchmove="handleTouchmove"
			@touchend="handleTouchend"
			v-else
		>
			<view class="app-classify-goods-list-two__list">
				<goods-list iconClass="icon-jiahao2fill" :leftGoodsList="leftList" :rightGoodsList="rightList"></goods-list>
			</view>
			<load-more v-if="!isEmpty" :showLoad="showLoad">
				<view class="e-flex-xy-center" v-if="nextText">
					<view class="app-classify-goods-list-two__icon img-34" :class="[hasNext && 'is-active']">
						<app-image src="arrow-up-double.png" size="34rpx"></app-image>
					</view>
					<text class="e-font-24 c-secondary e-p-l-10">{{ $t(nextText) }}</text>
				</view>
			</load-more>
		</e-scroll-view>
	</view>
</template>

<script setup lang="ts">
import { watch, computed,nextTick,onMounted } from 'vue';
import { getGoodsList } from '@/common/request/api';
import { useCurrentInstance, useWaterfallsPage } from '@/common/hooks';
import { useScrollView } from '../../hooks/useScrollView';
import { getRect } from '@/common/utils';

const props = defineProps({
	params: Object,
	refresherEnabled: Boolean
});
const emit = defineEmits(['prev', 'next']);

const ctx = useCurrentInstance();

const requestParams = computed(() => props.params);

const { showLoad, isGet, leftList, rightList, isEmpty, handleQueryPage, handleRefresh } = useWaterfallsPage({
	api: getGoodsList,
	option: {
		params: requestParams
	}
});

const { scrollViewRef, handlePullDownRefresh, watchTouchmove, hasNext,hasFullPage, nextText, scrollHeight,handleScroll, handleTouchstart, handleTouchmove, handleTouchend, hasLoading } = useScrollView(
	isGet,
	() => {
		emit('prev')
	},
	() => {
		emit('next')
	}
);

watch(requestParams, () => {
	watchTouchmove.value = false;
	hasLoading.value = true;
	hasFullPage.value = true
	leftList.splice(0, leftList.length);
	rightList.splice(0, rightList.length);
	handleRefresh().finally(() => {
		hasLoading.value = false;
		nextTick(async () => {
			if (!isGet.value) {
				if(!scrollHeight.value){
					const boxSize = await getRect(ctx, '.app-classify-goods-list-two')
					scrollHeight.value = boxSize.height!
				}
				getRect(ctx, '.app-classify-goods-list-two__list').then((size) => {
					if (size.height! < scrollHeight.value) {
						hasFullPage.value = false;
					}
				});
			}
		});
	});
});
onMounted(() => {
	getRect(ctx, '.app-classify-goods-list-two').then((size) => {
		scrollHeight.value = size.height!
	});
})
</script>

<style lang="scss" scoped>
@include appBem_b(classify-goods-list-two) {
	height: 100%;
	padding: 16rpx;
	:deep(.app-components-goods-list) {
		padding: 0;
	}
	@include appBem_e(skeleton) {
		height: 100%;
	}
	@include appBem_e(icon) {
		transition-duration: 0.2s;
		transition-property: transform;
		transform: rotate(0deg);
		@include appWhen(active){
			transform: rotate(180deg);
		}
	}
}
</style>
